<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="sj" uri="/struts-jquery-tags"%>

<div class="header"><span><span class="ico gray administrator"></span>Add Groups</span>
</div><!-- End header -->	
<div class="content" >
	<s:form name="formBody" id="validation_demo">
	    <s:hidden name="start"/>
	    <s:hidden name="count"/>
	    <s:hidden name="orderBy"/>
	    <s:hidden name="ascDesc"/>
	    <s:hidden name="previousPage"/>
	    <s:hidden name="actionMethod" value="%{actionMethod}"/>
	    <s:hidden name="subaction"/>
	    <s:hidden name="id" value="%{@com.lemurian.bankdata.lite.utils.GlobalFunction@encodeParameter(id)}"/>
	    <s:token/>
	
		<!-- Third / Half column-->
		<div class="widgets">
		
		<div class="oneTwo">
			<div class="section">
				<label><s:text name="label.name"/><small>Nama dari group</small></label>   
				<div> 
				    <s:textfield cssClass="validate[required] text-input large" name="group.groupName"
								labelposition="left" maxlength="30" id="name" autocomplete="off"/>
				</div>
			</div>
		</div>
			
		<div class="oneTwo">
			
			<div class="section ">
				<label><s:text name="label.groupType"/><small>Type dari group</small></label>   
				<div style="width: 74%!importand"> 
					<s:select cssClass="validate[required] large chzn-select" list="userTypes" listKey="%{@com.lemurian.bankdata.lite.utils.GlobalFunction@encodeParameter(id)}" listValue="name" name="userTypeId" headerKey="0" headerValue="Select below" disabled="%{readOnly}" tooltip=""/>
				</div>
			</div>
		  
		</div>
		
		<div class="clear"></div>
		
		<div style="margin-top:10px;margin-bottom:10px;"></div>
		<div class="oneThree">
			<input type="text" id="box1Filter" placeholder="Filter" /><br /><br />
			<s:select id="box1View" multiple="true" list="availableViewList" listValue="parentName" listKey="id" name="availableViewIds" disabled="%{readOnly}" cssStyle="height:300px;width:100%;"/>
			<div class="clear"></div>

			<span id="box1Counter" class="countLabel"></span>
			<select id="box1Storage"></select>

		</div><!-- End Third width column -->

		<div class="oneFour" align="center">
			<div class="boxMove">
				<a class="uibutton confirm" > <img src="images/eArrow.png" id="to2" alt="first"/> </a>
				<a class="uibutton confirm" > <img src="images/eeArrow.png" id="allTo2" alt="first"/> </a>
				<div class="clear"></div>
				<br />
				<a class="uibutton confirm" > <img src="images/wwArrow.png" id="allTo1" alt="first"/> </a>
				<a class="uibutton confirm" > <img src="images/wArrow.png" id="to1" alt="first"/> </a>
			</div>
		</div><!-- End Third width column -->

		<div class="oneThree">                   
			<input type="text" id="box2Filter" placeholder="Filter" /><br /><br />
			<s:select id="box2View" multiple="true" list="choosenViewList" listValue="parentName" listKey="id" name="choosenViewIds" disabled="%{readOnly}" cssStyle="height:300px;width:100%;"/>
			<!-- clear fix -->
			<div class="clear"></div>
			<span id="box2Counter" class="countLabel"></span>
			<select id="box2Storage"></select>

		</div><!-- End Third width column -->
		<!-- clear fix -->
		<div class="clear"></div>
		<div class="section last" style="margin-top: 15px;">
		    <s:reset cssClass="uibutton special" value="RESET" cssStyle="width:100px"/>
           	<s:submit action="%{actionMethod}" value="SUBMIT" cssClass="uibutton" cssStyle="width:100px" onclick="selectAllOptions(document.getElementById('box1View'));selectAllOptions(document.getElementById('box2View'));"/>
		</div>
		
	</div><!-- End Third width widgets -->
	
	</s:form>

   <!-- clear fix -->
<div class="clear"></div>

</div><!-- End content -->